<template>
    <view class="subscribe">
        <Navigation background="#ffffff" rightType="collectShare" />
        <Info :id="id"/>
        <view class="beautician b-24 ph-32 pv-32">
            <view class="fs-28 fw-600 text-color4">服务美容师</view>
            <view class="mt-20 ph-28 pv-28 f jc-s-b list b-24" v-for="(item, index) in staff" :key="index">
                <image :src="item.avatar" class="w-120 h-120 b-12 mr-20 mt-10"></image>
                <view class="f fd-c f1">
                    <view class="f ai-c jc-s-b w-f">
                        <view class="f ai-c f1">
                            <view class="fs-30 fw-600 text-color4">{{item.name}}</view>
                            <view class="w-112 h-28 b-4 f ai-c jc-c fs-20 level ml-12">中级美容师</view>
                        </view>
                        <view class="w-144 h-56 b-56 fs-26 text-color5 f ai-c jc-c btn" @click="toSubscribe(item)">立即预约</view>
                    </view>
                    <view class="f mt-16 ai-c">
                        <view class="f">
                            <image  :src="ky < item.score ? star : starSelect" class="w-24 h-24 mr-8"  v-for="(im, ky) in item.scores"
                                        :key="ky"></image>
                        </view>
                        <view class="fs-28 fw-600 text-color ml-12">{{item.score}}</view>
                    </view>
                    <view class="f mt-16">
                        <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag" v-for="(v,k) in item.skillings">{{v}}</view>
                        <!-- <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag">服务之星</view> -->
                    </view>
                    <view class="f mt-12">
                        <view class="fs-24 text-color3">个人简介：</view>
                        <view class="f f1 text-ellipsis-1 text-color4 fs-24">{{item.introduction}}</view>
                    </view>
                    <!-- <view class="f mt-12">
                        <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                        <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                    </view> -->
                </view>
            </view>
        </view>
        <!-- 回到顶部 -->
        <view class="w-96 h-96 b-96 f ai-c jc-c fd-c to-top" @click="toTop">
            <image src="http://cwht.ricecs.cn/app/shop/top.png" class="w-24 h-26"></image>
            <view class="fs-24 fw-500 text-color4 mt-4">顶部</view>
        </view>
    </view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import Info from './Info.vue';
import { onLoad } from '@dcloudio/uni-app';
import { staffList } from '@/services/api/serve/index';
const id = ref(null);
const staff = ref<any>([]);

onLoad((options: any) => {
    id.value = options.id;
	getStaff()
});
async function getStaff(){
	const { data } = await staffList({storeId:id.value});
	data.forEach((item: any) => {
	    item.skillings = item.skillings.split('、');
	});
	staff.value = data;
}
//回到顶部
const toTop = () => {
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 200,
    });
};
const toSubscribe = (item:any) => {
	uni.setStorageSync('subscribe',item);
    uni.navigateTo({
        url: '/pages_serve/subscribe?sub_id='+item.id+'&id='+id.value,
    });
};
</script>
<style lang="scss" scoped>
.subscribe {
    background: #f5f5f5;
    min-height: 100vh;
    .to-top {
        border: 1rpx solid #dddddd;
        box-shadow: 0 2rpx 12rpx 0 #0000000f;
        position: fixed;
        right: 20rpx;
        bottom: 200rpx;
        background: #fff;
    }
    .list {
        border: 1rpx solid #dddddd;
    }
    .tag2 {
        background: #f0f2f5;
        color: #5769a0;
    }
    .tag {
        background: #fff5f5;
    }
    .btn {
        background: #fabb3c;
    }
    .level {
        background: #fff9e6;
        color: #fac519;
    }
    .beautician {
        background: #fff;
    }
}
</style>
